<template>
    <div class="addAirPlan">
        <custom-dialog :title="type == 'add' ? '新增方案' : '编辑方案'" size="small" @dialogClose="dialogClose">
            <div class="bottomContent">
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                    <Row>
                        <Col span="24">
                            <FormItem label="方案名称" prop="famc">
                                <Input v-model="formValidate.famc" placeholder="请输入方案名称"></Input> </FormItem
                        ></Col>
                    </Row>
                    <Row>
                        <Col span="24">
                            <FormItem label="账户类型" prop="zhlx">
                                <Select v-model="formValidate.zhlx" clearable style="width: 100%">
                                    <Option v-for="item in zhlxList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                                </Select>
                            </FormItem></Col
                        >
                    </Row>
                    <Row>
                        <Col span="24">
                            <FormItem label="定额总发放量" prop="dezffl">
                                <Input type="number" v-model="formValidate.dezffl" placeholder="请输入定额总发放量"></Input> </FormItem
                        ></Col>
                    </Row>
                    <Row>
                        <Col span="24">
                            <FormItem label="电定额发放量" prop="ddeffl">
                                <Input type="number" v-model="formValidate.ddeffl" placeholder="请输入电定额发放量"></Input> </FormItem
                        ></Col>
                    </Row>
                    <Row>
                        <Col span="24">
                            <FormItem label="水定额发放量" prop="sdeffl">
                                <Input type="number" v-model="formValidate.sdeffl" placeholder="请输入水定额发放量"></Input> </FormItem
                        ></Col>
                    </Row>
                    <Row>
                        <Col span="24">
                            <FormItem label="是否启用" prop="sfqy"> <Checkbox v-model="formValidate.sfqy"></Checkbox> </FormItem
                        ></Col>
                    </Row>
                    <FormItem label="方案描述" prop="REMARK">
                        <Input type="textarea" v-model="formValidate.REMARK" placeholder="请输入方案描述"></Input>
                    </FormItem>
                </Form>
                <el-button type="default" class="nextBtn" @click="dialogClose" style="margin-left: 10px">取消</el-button>
                <el-button type="primary" class="nextBtn" style="margin-left: 10px" @click="handleSubmit('formValidate')">确定</el-button>
            </div>
        </custom-dialog>
    </div>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
export default {
    name: 'addAirPlan',
    components: {customDialog},
    props: ['type'],
    data() {
        return {
            zhlxList: [
                {
                    label: '类型1',
                    value: '1'
                },
                {
                    label: '类型2',
                    value: '2'
                }
            ],
            formValidate: {
                dezffl: '',
                ddeffl: '',
                sdeffl: '',
                famc: '',
                sfqy: false,
                zhlx: '',
                REMARK: ''
            },
            ruleValidate: {
                famc: [{required: true, message: '请填写方案名称', trigger: 'blur'}],
                zhlx: [{required: true, message: '请选择账户类型', trigger: 'change'}],
                dezffl: [{required: true, message: '请填写定额总发放量', trigger: 'blur'}],
                ddeffl: [{required: true, message: '请填写电定额发放量', trigger: 'blur'}],
                sdeffl: [{required: true, message: '请填写水定额发放量', trigger: 'blur'}]
            },
            wdsnkq: 1,
            wdsnkqList: [
                {
                    label: '开启',
                    value: 1
                },
                {
                    label: '关闭',
                    value: 0
                }
            ],
            snyxfs: 1,
            snyxfsList: [
                {
                    label: '按天使能',
                    value: 1
                },
                {
                    label: '按月使能',
                    value: 0
                }
            ],
            kgjkz: 1,
            kgjkzList: [
                {
                    label: '制冷/制热关机',
                    value: 1
                },
                {
                    label: '制冷/制热开机',
                    value: 0
                }
            ],
            workMode: [],
            current: 1,
            value1: 28,
            value2: 28,
            value3: 26,
            value4: 10,
            value5: 10,
            value6: 20,
            value7: '',
            value8: '',
            value9: '',
            value10: '',
            value11: '',
            value12: '',
            value13: 30
        }
    },
    computed: {},
    created() {},
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    const data = this.formValidate
                    this.$emit('getData', data)
                }
            })
        },
        dialogClose() {
            this.$emit('dialogClose', '')
        }
    }
}
</script>

<style lang="scss" scoped>
.topStep {
    width: 100%;
    overflow: hidden;
}
.bottomContent {
    .famc {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .settings {
        margin-top: 10px;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        .leftLabel {
            width: 100px;
            display: inline-block;
            text-align: left;
        }
        .workMode {
            display: flex;
            width: 100%;
        }
        .work {
            margin-top: 10px;
            display: flex;
            width: 100%;
            gap: 10px;
            .item {
                width: calc((100% - 10px) / 3);
            }
        }
        .timeSet {
            margin-top: 10px;
            display: flex;
            width: 100%;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }
    }
    padding: 20px 0;
    .nextBtn {
        margin-top: 10px;
        float: right;
    }
}
</style>